<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .fdj {
            width: 1200px;
            margin: 40px auto;
            display: flex;
        }

        .left {
            width: 300px;
            height: 300px;
        }

        .left1 {
            width: 300px;
            height: 300px;
            position: relative;
            border: 1px solid #999;
        }

        .left1 img {
            width: 300px;
            height: 300px;
        }

        .smallImg {
            width: 60px;
            height: 60px;
            border: 1px solid #333;
            cursor: pointer;
        }

        .cloth {
            width: 100px;
            height: 100px;
            background: rgba(0, 0, 0, .5);
            position: absolute;
            left: 0;
            top: 0;
            display: none;
            cursor: pointer;
        }

        .right {
            width: 500px;
            height: 500px;
            /* background-color: #ddd; */
            overflow: hidden;
            position: relative;
            margin-left: 50px;

        }

        .right img {
            width: 1500px;
            height: 1500px;
            display: none;
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="fdj">
        <div class="left">
            <div class="left1">
                <img src="./images/1.big.jpg" alt="" class="imgs">
                <div class="cloth"></div>
            </div>
            <p class="p1"></p>
        </div>
        <div class="right">
            <img src="./images/1.big.jpg" alt="">
        </div>
    </div>



    <script>

        let left1Ele = $('.left1');
        let clothEle = $('.cloth');
        let rightEle = $('.right');
        let rightImgEle = $('.right img')
        let pEle = $('.p1')
        let leftImgEle = $('.imgs')


        // 切换图片
        let smallImg = ['./images/1.small.jpg', './images/2.small.jpg'];
        let bigImg = ["./images/1.jpg", "./images/2.jpg"];
        let bigImgs = ["./images/1.big.jpg", "./images/2.big.jpg"]


        //打开页面  默认显示一张大图，连接数组
        leftImgEle.src = bigImg[0];
        rightImgEle.src = bigImgs[0];


        // 循环遍历小图
        smallImg.forEach(item => {
            var imgEle = document.createElement('img');
            imgEle.src = item;
            imgEle.className = 'smallImg';
            pEle.appendChild(imgEle);
        })


        // 获取所有的小图
        var smallImgEle = document.querySelectorAll('.smallImg');
        smallImgEle.forEach((item, key) => {
            item.onclick = function () {
                leftImgEle.src = bigImg[key];
                rightImgEle.src = bigImgs[key];
            }
        })


        // 思路： 移入显示膜和图片   鼠标移动时中心跟随  移出就膜和图片消失且把移动事件清除
        left1Ele.onmouseover = function () {
            clothEle.style.display = 'block';
            rightImgEle.style.display = 'block';

            document.onmousemove = function (e) {
                let r = clothEle.offsetWidth / 2
                let x = e.clientX - left1Ele.offsetLeft - r;
                let y = e.clientY - left1Ele.offsetTop - r;

                // 临界值
                if (x <= 0) x = 0;
                if (y <= 0) y = 0;
                if (x >= left1Ele.clientWidth - clothEle.offsetWidth) x = left1Ele.clientWidth - clothEle.offsetWidth;
                if (y >= left1Ele.clientHeight - clothEle.offsetHeight) y = left1Ele.clientHeight - clothEle.offsetHeight;


                clothEle.style.left = x + 'px';
                clothEle.style.top = y + 'px';


                // 大图和膜的比例  拿到相关样式   大图片减大盒子/大盒子减遮油层   宽高一致，可以直接代替
                let rightEleWidth = parseInt(window.getComputedStyle(rightEle)['width']);
                let rightImgEleWidth = parseInt(window.getComputedStyle(rightImgEle)['width'])
                let res = rightImgEleWidth - rightEleWidth;
                let res2 = left1Ele.clientWidth - clothEle.offsetWidth;
                // console.log(res, res2);
                let sum = res / res2;
                // console.log(sum);
                // 大图等比例移动 反向移动
                rightImgEle.style.left = -sum * x + 'px';
                rightImgEle.style.top = -sum * y + 'px';
            }
        }
        left1Ele.onmouseout = function () {
            clothEle.style.display = 'none';
            rightImgEle.style.display = 'none';
            // 鼠标移出以后，除了隐藏遮罩层之外，最好把事件清除
            document.onmousemove = null;
        }


        function $(ele) {
            return document.querySelector(ele);
        }

    </script>
</body>

</html>